<template>
  <div class="left">
    <leftSlot class="top">
      <template #name>
        <div style="margin-bottom: 5px">排行榜</div>
      </template>
      <template #content>
        <div class="header">
          <div class="num">排名</div>
          <div class="name">地区</div>
          <div class="value">数量</div>
        </div>
        <div class="header content">
          <div class="contentleft">NO.1</div>
          <div class="contentcent">峨眉山</div>
          <div class="contentright" ref="contentright"></div>
          <span>80%</span>
        </div>
      </template>
    </leftSlot>
    <leftSlot class="top">
      <template #name>
        <div style="margin-bottom: 5px">数量比例</div>
      </template>
      <template #content>
        <div class="tripers" ref="tripers"></div>
      </template>
    </leftSlot>
    <leftSlot class="top">
      <template #name>
        <div style="margin-bottom: 5px">数据统计</div>
      </template>
      <template #content>
        <div class="Statistics" ref="Statistics"></div>
      </template>
    </leftSlot>
  </div>
</template>

<script lang="ts" setup>
import leftSlot from './left-slot.vue'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
onMounted(() => {
  const rank = echarts.init(contentright.value)
  rank.setOption(rankoption)
  const triper = echarts.init(tripers.value)
  triper.setOption(tripersoption)
  const statistics = echarts.init(Statistics.value)
  statistics.setOption(statisticsoption)
})
const contentright = ref(null)
const rankoption = {
  xAxis: {
    show: false,
    min: 0,
    max: 100
  },
  yAxis: {
    show: false,
    type: 'category'
  },
  series: [
    {
      type: 'bar',
      data: [100],
      barWidth: 10,
      itemStyle: {
        color: '#11144e',
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#64DB9B'
      }
    },
    {
      type: 'bar',
      z: 100,
      data: [80],
      barWidth: 10,
      //调整女士柱条位置
      barGap: '-100%',
      itemStyle: {
        color: '#ff9854',
        borderRadius: 20
      }
    }
  ]
}

const tripers = ref(null)
const tripersoption = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
}

const Statistics = ref(null)
const statisticsoption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    right: 0,
    orient: 'vertical', //图例组件方向的设置
    textStyle: {
      color: 'white',
      fontSize: 12
    }
  },
  series: [
    {
      name: '数据统计',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      padAngle: 1, //扇形之间的间距
      itemStyle: {
        borderColor: '#fff'
      },
      label: {
        show: true,
        position: 'inside',
        color: 'white'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 1048, name: '18-30' },
        { value: 735, name: '10以下' },
        { value: 580, name: '10-18' },
        { value: 484, name: '30-60' },
        { value: 300, name: '60以上' }
      ]
    }
  ]
}
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  color: #fff;
  .bg {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .top {
    width: 100%;
    height: 30%;
    margin-bottom: 20px;
    background-image: url('../images//dataScreen-main-rb.png');
    .header {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 12px;
      .num {
        flex: 0.5;
      }
      .name {
        flex: 0.5;
      }
      .value {
        flex: 1;
      }
    }
    .content {
      padding: 0 10px;
      margin-left: -5px;
      .contentleft {
        flex: 0.5;
      }
      .contentcent {
        flex: 0.5;
      }
      .contentright {
        flex: 1.5;
        height: 20px;
      }
    }
    .tripers {
      width: 100%;
      height: 150px;
      font-size: 12px;
      margin-top: 20px;
    }
    .Statistics {
      width: 100%;
      height: 150px;
      margin-top: 20px;
    }
  }
}
</style>
